import React, { Component } from 'react'
import { Select, Row, Col, DatePicker, Modal } from 'antd'
import moment from 'moment';

// import echarts from 'echarts'
import $ from 'jquery'

import style from './index.scss'


const Option = Select.Option;
const { RangePicker } = DatePicker;

export default class ServerConsume extends Component {
    constructor(props) {
        super(props);

        this.dataString = new Date().toLocaleDateString();
        console.log(this.dataString);
        this.today = moment(this.dataString).format('YYYYMMDD');
        console.log(this.today);

        this.state = {
            address: '',
            chartData: [],
            selectItem: {},
        };
        this.modules = [];
        this.nowModule = '';
        this.startTime = this.today;
        this.endTime = this.today;


        this.getInfoAdress();
    }

    getInfoAdress = () => {
        $.ajax({
            url: '/base/expose/monitor/address',
            type: 'get',
            success: (resdata) => {
                this.setState({
                    address: resdata.address
                });
                this.getInfoModules();
            }
        });
    }

    getInfoModules = () => {
        $.ajax({
            url: '/base/expose/modules',
            type: 'get',
            success: (resdata) => {
                this.modules = resdata;
                this.nowModule = resdata[0];
                this.getData();
            }
        });
    }

    getData = () => {
        let mixUrl = 'http://' + this.state.address + '/monitor/main/server/consume/' + this.nowModule;
        console.log(this.startTime);
        console.log(this.endTime);

        if (this.startTime != '' && this.endTime != '') {
            mixUrl = mixUrl + '/' + this.startTime + '/' + this.endTime;
        }
        $.ajax({
            url: mixUrl,
            type: 'get',
            success: (resdata) => {
                this.setState({
                    chartData: resdata
                });
                this.resizeChart();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                Modal.error({
                    title: '错误提示',
                    content: "数据获取失败，请重新发起请求",
                });
            }
        });
    }

    resizeChart = () => {
        let myChart = echarts.init(document.getElementById('pieChart'));

        let data = [];
        if (this.state.chartData != []) {
            this.state.chartData.map((item) => {
                data.push({
                    value: item.successCount + item.failCount,
                    name: item.url
                })
            });
        }

        let option = {
            backgroundColor: '#2c343c',

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '80%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal: {
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            },
                            formatter: '{d}%'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data.sort(function (a, b) { return a.value - b.value; })
                }
            ]
        };

        myChart.setOption(option);


        myChart.on('mouseover', (params) => {
            if (this.state.chartData != []) {
                this.state.chartData.map((item) => {
                    if (item.url == params.name) {
                        this.setState({
                            selectItem: item
                        });
                    }
                });
            }
        });

        window.onresize = () => {
            myChart.resize();
        }
    }

    handleChange = (value) => {
        this.nowModule = value;
        this.getData();
    }

    onTimeChange = (date, dateString) => {
        console.log(dateString[0]);
        this.startTime = dateString[0];
        this.endTime = dateString[1];
        this.getData();
    }

    render() {
        let optionItem;
        if (this.modules.length > 0) {
            optionItem =  this.modules.map((item, index) => {
                return <Option key={index} value={item}>{item}</Option>
            })
        } else {
            optionItem = <Option value=""></Option>
        }

        return (
            <div className={style.consume}>
                <Row>
                    <Col span={12}>
                        <div id="pieChart" className={style.chartArea}>
                            暂无数据
                        </div>
                    </Col>
                    <Col span={10} className={style.textArea}>
                        <Row>
                            <Col span={14}>
                                <RangePicker format="YYYYMMDD" defaultValue={[moment(this.today, 'YYYYMMDD'), moment(this.today, 'YYYYMMDD')]} onChange={this.onTimeChange} />
                            </Col>
                            <Col span={8} offset={2}>
                                <Select defaultValue='base'  style={{ width: '100%' }} onChange={this.handleChange}>
                                    {optionItem}
                                </Select>
                            </Col>
                        </Row>

                        <div className={style.contxt}>
                            详情
                            <p>接口地址： {this.state.selectItem.url}</p>
                            <p>平均耗时： {this.state.selectItem.costTimeMsAvg} ms</p>
                            <p>成功次数： {this.state.selectItem.successCount}</p>
                            <p>失败次数： {this.state.selectItem.failCount}</p>
                        </div>

                    </Col>
                </Row>

            </div>
        )
    }
}
